<template>
	<div class="tools-warp">
		<el-card shadow="hover">
			<div slot="header">
				<div style="width: 400px; display: flex;align-items: center;">
					<el-input v-model="parms.keyword" placeholder="请输入内容" style="margin-right: 10px;"></el-input><el-button
						type="primary" @click="sherchQuer">查询</el-button> <el-button type="success"
						@click="addcanpus">添加</el-button>
				</div>
			</div>
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column prop="nickName" label="家长姓名" align="center">
				</el-table-column>
				<el-table-column prop="studentName" label="学员姓名" align="center">
				</el-table-column>
				<el-table-column prop="telPhone" label="电话" align="center">
				</el-table-column>
				<el-table-column prop="userName" label="账号" align="center">
				</el-table-column>
				<el-table-column prop="remarks" label="备注" align="center">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="250" align="center">
					<template slot-scope="scope">
						<el-button @click="endClick(scope.row)" type="primary" size="small">编辑</el-button>
						<el-button @click="bindClick(scope.row)" type="success" size="small">绑定学员</el-button>
						<el-button @click="handleClick(scope.row)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="padding: 20px 0;">
				<el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-card>
		<el-dialog :title="texts" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="家长姓名" prop="nickName">
					<el-input v-model="ruleForm.nickName" placeholder="请输入家长姓名"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="telPhone">
					<el-input v-model="ruleForm.telPhone" maxlength="11" placeholder="请输入校区电话"></el-input>
				</el-form-item>
				<el-form-item label="账号" prop="userName">
					<el-input v-model="ruleForm.userName" placeholder="请输入校区电话"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="ruleForm.password" placeholder="请输入校区电话"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="ruleForm.remarks" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="请输入备注"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetForm('ruleForm')">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="绑定学员" :visible.sync="dialogminiVisible" width="30%" :close-on-click-modal="false">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="学员">
					<el-select v-model="studentId" placeholder="请选择校区" style="width: 100%;">
						<el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogminiVisible = false">取 消</el-button>
				<el-button type="primary" @click="okbangdi">绑 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { allAdminApi } from '@/api/allapi';
const adminApi = allAdminApi();
export default {
	name: 'campus',
	data() {

		return {
			imageUrl: '',
			input: "",
			studentId:null,
			texts: "添加家长信息",
			dialogVisible: false,
			dialogminiVisible: false,
			options: [],
			tableData: [],
			total: 0,
			miniparms: {
				keyword: "",
				classId: "",
			},
			parms: {
				limit: 10,
				page: 1,
				keyword: "",
				roleId: 3,
			},
			ruleForm: {
				nickName: '',
				telPhone: '',
				password: "",
				userName: '',
				remarks: '',
				roleId: 3,
			},
			objs: {},
			rules: {
				nickName: [
					{ required: true, message: '请输入家长姓名', trigger: 'change' },
				],
				telPhone: [
					{ required: true, message: '请输入电话', trigger: 'change' },
				],
				userName: [
					{ required: true, message: '请输入账号', trigger: 'change' },
				],
			},
		};
	},
	mounted() {
		this.campusListApi();
		this.sherchList()
	},
	methods: {
		campusListApi() {
			adminApi.listNotPageList(this.miniparms).then((res) => {
				if (res.code == 200) {
					this.options = res.result;
				}
			})
		},
		sherchQuer() {
			this.parms.page = 1
			this.sherchList()
		},
		handleCurrentChange(val) {
			this.parms.page = val
			this.sherchList()
		},
		sherchList() {
			adminApi.userslistApi(this.parms).then((res) => {
				if (res.code == 200) {
					this.tableData = res.result;
					this.total = res.count;
				}
			})
		},
		bindClick(row) {
			this.objs = row
			if(row.studentId){
				this.studentId = row.studentId
			}else{
				this.studentId = null
			}
			
			this.dialogminiVisible = true;
		},
		okbangdi() {
			adminApi.bindStudentApi({id: this.objs.id, studentId: this.studentId }).then((res) => {
				if (res.code == 200) {
					this.$message({
						type: 'success',
						message: res.msg
					});
					this.sherchList()
					this.dialogminiVisible = false;
				}
			})
		},
		endClick(row) {
			this.texts = "编辑家长信息";
			this.ruleForm = row
			this.dialogVisible = true;
		},
		handleClick(row) {
			this.$confirm('此操作将永久删除该家长, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				adminApi.deleteusersinfo(row.id).then((res) => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.sherchList()
					}
				})
			})
		},
		resetForm(formName) {
			this.ruleForm.password = "";
			this.ruleForm.textarea = "";
			this.$refs[formName].resetFields();
			this.dialogVisible = false;
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					adminApi.addOrUpdateUserApi(this.ruleForm).then((res) => {
						if (res.code == 200) {
							this.$message.success(res.msg);
							this.$refs[formName].resetFields();
							this.ruleForm.remarks = "";
							this.ruleForm.password = "";
							this.sherchQuer()
							this.dialogVisible = false
						}
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		addcanpus() {
			this.texts = "添加家长信息";
			this.dialogVisible = true;
		},
	},
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
